<template>
  <div class="productList">
    <ul v-if="list && list.length > 0">
      <li v-for="(item,index) in list" :key="index" @click="handleDetail(item)">
        <div class="image" :style="{backgroundImage:`url(${item.image})`}"></div>
        <div class="good-title">{{item.name}}</div>
        <div v-if="userInfo.status === 1" class="price_warpper">
          <div class="price">
            {{item.priceText!=='面议'?'￥':''}}
            <span>{{item.priceText}}</span>
          </div>
        </div>
        <PriceInfo v-else></PriceInfo>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import PriceInfo from "@/views/front/components/priceInfo.vue";

export default {
  name: 'GoodList',
  components: {
			PriceInfo
	},
  props: {
    list: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
    };
  },
  updated() {
    this.$nextTick(() => {
      let imgList = document.querySelectorAll(".productList .image")
      if (imgList && imgList.length > 0) {
        imgList.forEach(img => {
          img.style.height = img.getBoundingClientRect().width + 'px';
        });
      }
    })
  },
  computed: {
			...mapGetters(["userInfo"])
		},
  methods: {
    handleDetail(item) {
      this.$emit("handleDetail", item);
    }
  }
}
</script>

